﻿html, body, div, input, svg, a, img, p, span, strong, canvas, select, table, tr, td, iframe, thead, tfoot, tbody {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

img {
    border: none;
}

.btn {
    padding: 3px 25px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    color: #fff;
    background-color: #db7303;
    border: 1px solid #763b21;
    font-size: .8rem;
    font-weight: bold;
    font-family: Arial;
}

    .btn:hover {
        background-color: #fc901b;
    }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#loading {
    width: 100%; height: 100%;
    background: url('/style/loading.gif') no-repeat center center;
}

body {
    background-color: #04121b;
    font-size: 62.5%;
    font-family: Verdana;
    color: #eee;
    background: url('main-bg.jpg') no-repeat top left #04121b;
    background-size: 100% auto;
}

h2 {
    font-size: 1.5rem;
}

#main #greeting {
    margin: 10% auto;
    font-size: .8rem;
    width: 85%;
    height: auto;
}

    #main #greeting #avatar {
        width: 25%;
        height: auto;
    }



#main #box {
    padding: 2%;
    margin-top: 25px;
    font-family: Georgia;
    color: #eee;
    width: 65%;
    background-color: rgba(29,51,63,0.5);
    box-shadow: 0 0 15px #8bcaee;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    float: right;
}

    #main #box p {
        margin-top: 10px;
    }

    #main #box #menu {
        margin-top: 70px;
    }

    #main #box #explain {
        margin-top: 20px;
        text-align: center;
    }

select {
    font-weight: bold;
    background-color: #763b21;
    color: #fff;
    border: none;
    font-family: Verdana;
}

#controls {
    position: absolute;
    top: 70px;
    right:0;
    padding: 2%;
    height: auto;
    width: 19%;
    text-align: center;
    background-color: rgba(29,51,63,0.8);
    font-size: .9rem;
    font-weight: bold;
    -moz-border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 0 15px #8bcaee;
}

    #controls #settings {
        color: #db7303;
    }
    #controls #avatar {
        margin: 0 10%;
        width: 80%;
        height: auto;
    }

    #controls #settings p {
        color: #aaa;
        margin-left: 8px;
        font-size: .7rem;
    }

    #controls #settings input[type="range"] {
        width: 100%
    }

    #controls #settings span {
        margin-top: 5px;
    }

#root {
    padding: 10px;
    width: 100%;
    background-color: #763b21;
    border: none;
    color:#fff;
    font-family:Verdana;
}

#graph {
    position: relative;
    margin-left: 2%;
    margin-top: 20px;
    width: 73%;
    height: 90%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px #8bcaee;
    background-color: rgba(13,21,26,0.95);
    overflow: hidden;
}

#demo {
    padding: 2%;
    float: left;
    width: auto;
    margin-top: 10%;
    margin-left: 3%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px #8bcaee;
    background-color: rgba(13,21,26,0.95);
}

svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    fill: #eee;
    font-size: 24px;
    overflow: hidden;
}
